<template>
    <div class="px">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                <div>
                    <selfCard/>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>修改信息</span>
                        </div>
                        <div>
                            <el-tabs v-model="activeName" type="card">
                                <el-tab-pane label="基本资料" name="first">
                                    <div style="max-width: 500px;margin: 0 auto;">
                                        <el-form :inline="false" ref="elForm" :model="formData"
                                                 label-width="90px"
                                                 label-position="right">
                                            <el-form-item label="姓名" prop="name">
                                                <el-input v-model="formData.name" placeholder="请输入姓名" clearable
                                                          :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                            <el-form-item class="text" label="性别">
                                                <el-select v-model="formData.gender"
                                                           placeholder="请选择性别"
                                                >
                                                    <el-option
                                                            v-for="item in gender"
                                                            :key="item.valueId"
                                                            :label="item.valueName"
                                                            :value="item.valueId">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="身份证号码">
                                                <el-input v-model="formData.idCard" placeholder="请输入身份证号码"
                                                          show-word-limit clearable
                                                          :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                            <el-form-item label="手机号码">
                                                <el-input v-model="formData.phone" placeholder="请输入手机号码" clearable
                                                          :style="{width: '100%'}">
                                                </el-input>
                                            </el-form-item>

                                            <div style="text-align: center;">
                                                <el-form-item size="large" align="center">
                                                    <el-button
                                                            @click="updateSelf"
                                                            icon="el-icon-edit"
                                                            type="primary">
                                                        修改
                                                    </el-button>
                                                </el-form-item>
                                            </div>
                                        </el-form>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="修改密码" name="second">
                                    <div style="max-width: 500px;margin: 0 auto;">
                                        <el-form :inline="false" ref="elForm" :model="resetPsw"
                                                 label-width="90px"
                                                 label-position="right">
                                            <el-form-item label="原密码">
                                                <el-input v-model="resetPsw.oldPsw" placeholder="请输入原密码" show-password
                                                          type="password"
                                                          :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                            <el-form-item label="新密码">
                                                <el-input v-model="resetPsw.newPsw" placeholder="请输入原密码" show-password
                                                          type="password"
                                                          :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                            <el-form-item label="确认密码">
                                                <el-input v-model="resetPsw.reNewPsw" placeholder="请输入原密码" show-password
                                                          type="password"
                                                          :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                            <div style="text-align: center;">
                                                <el-form-item size="large" align="center">
                                                    <el-button
                                                            @click="selfResetPsw"
                                                            icon="el-icon-edit"
                                                            type="primary">
                                                        修改密码
                                                    </el-button>
                                                </el-form-item>
                                            </div>
                                        </el-form>

                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </el-card>
                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script>
    import selfCard from "./selfCard";
    import {queryByTypeCode} from "../../api/dictionary";
    import {selfResetPsw, selfUpdate} from "../../api/user";

    export default {
        name: "index",
        data() {
            return {
                activeName: 'first',
                userInfo: {},
                formData: {
                    name: "",
                    idCard: '',
                    gender: "",
                    phone: "",
                },
                resetPsw: {
                    oldPsw: "",
                    newPsw: "",
                    reNewPsw: ""
                },
                gender: [],
            }
        },
        components: {
            selfCard
        },
        mounted() {
            this.initData()
            this.initDict()
        },
        methods: {
            async initData() {
                let user = this.$store.state.user
                this.userInfo = user
                this.formData.name = user.name;
                this.formData.gender = user.gender;
                this.formData.idCard = user.idCard;
                this.formData.phone = user.phone;
            },
            async initDict() {
                let resp = await queryByTypeCode("gender");
                this.gender = resp.data
            },
            async updateSelf() {

                if (this.formData.name.length > 100) {
                    this.$message.warning("用户不规范！")
                    return false;
                }

                if (!this.formData.idCard || this.formData.idCard.length > 18
                    || this.formData.idCard.length < 15) {
                    this.$message.warning("身份证号码不规范！")
                    return false;

                }
                if (!this.formData.phone || this.formData.phone.length !== 11) {
                    this.$message.warning("手机号码长度是11位！")
                    return false;
                }


                let resp = await selfUpdate(this.formData);
                if (resp.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.$store.commit("setUser", resp.data)
                    this.initData()
                } else {
                    this.$message({
                        type: 'error',
                        message: '修改失败：' + resp.message
                    });
                }
            },
            async selfResetPsw() {
                if (
                    this.resetPsw.newPsw.length < 6
                ) {
                    this.$message({
                        type: 'warning',
                        message: '新密码长度必须大于6位'
                    });
                    return false;
                }

                if (
                    this.resetPsw.newPsw !==
                    this.resetPsw.reNewPsw
                ) {
                    this.$message({
                        type: 'warning',
                        message: '两次输入的密码不一致'
                    });
                    return false;
                }

                let resp = await selfResetPsw(this.resetPsw.oldPsw, this.resetPsw.newPsw)
                if (resp.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                    this.resetPsw = {
                        oldPsw: "",
                        newPsw: "",
                        reNewPsw: ""
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '重置失败：' + resp.message
                    });
                }
            }
        }
    }
</script>

<style scoped lang="scss">

</style>